<template>
  <div class="yun-page" style="overflow: hidden">
    <div class="yun-card">
      <img src="@/assets/img/maxbg.png" v-if='creenWidth>480' alt="" />
      <img src="@/assets/img/app/maxbg.png" v-if='creenWidth<480' alt="" />
      <div class="yun-card1" >
        <h3 class="yun-title">
          <span>—</span> <span> React.js Developer </span> <span>—</span>
        </h3>
        <p class="yun-sbtitle">
          We're seeking a React.js Developer to work remotely.
        </p>

        <div class="yun-write">
          <div class="yun-point1">
            <img src="@/assets/img/points.png" alt="" />
          </div>
          <div class="yun-point2">
            <img src="@/assets/img/points.png" alt="" />
          </div>
          <div class="yun-point3">
            <img src="@/assets/img/points.png" alt="" />
          </div>
          <div class="yun-write-card">
            <div class="yun-head">
              <span>Design </span>
              <span>Full-time</span>
              <span>Remote</span>
            </div>
            <div class="yun-btn">
              <p>Send us an email to the email address below!</p>
              <p>cora@exploitnetwork.com</p>
            </div>
          </div>
          <div class="yun-write-cont">
            <p class="yun-p">
              We are looking for a great JavaScript developer who is proficient
              with React.js. Your primary focus will be on developing user
              interface components and implementing them following well-known
              React.js workflows (such as Flux or Redux). You will ensure that
              these components and the overall application are robust and easy
              to maintain. You will coordinate with the rest of the team working
              on different layers of the infrastructure. Therefore, a commitment
              to collaborative problem solving, sophisticated design, and
              quality product is important.
            </p>
            <p class="yun-blue">Responsibilities</p>
            <p>- Developing new user-facing features using React.js</p>

            <p>
              - Building reusable components and front-end libraries for future
              use
            </p>

            <p>- Translating designs and wireframes into high quality code</p>

            <p>
              - Optimizing components for maximum performance across a vast
              array of web-capable devices and browsers
            </p>

            <p class="yun-blue">Skills</p>

            <p>
              - Strong proficiency in JavaScript, including DOM manipulation and
              the JavaScript object model
            </p>

            <p>- Thorough understanding of React.js and its core principles</p>

            <p>
              - Experience with popular React.js workflows (such as Flux or
              Redux)
            </p>

            <p>- Familiarity with newer specifications of EcmaScript</p>

            <p>
              - Experience with data structure libraries (e.g., Immutable.js)
            </p>

            <p>- Knowledge of isomorphic React is a plus</p>

            <p>- Familiarity with RESTful APIs</p>

            <p>
              - Knowledge of modern authorization mechanisms, such as JSON Web
              Token
            </p>

            <p>- Familiarity with modern front-end build pipelines and tools</p>

            <p>
              - Experience with common front-end development tools such as
              Babel, Webpack, NPM, etc.
            </p>

            <p>
              - Ability to understand business requirements and translate them
              into technical requirements
            </p>

            <p>- A knack for benchmarking and optimization</p>

            <p>
              - Familiarity with code versioning tools {such as Git, SVN, and
              Mercurial}
            </p>

            ‍
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Home",
  components: {},
  data() {
    return {
       creenWidth: document.body.clientWidth,
    };
  },
};
</script>
<style lang='scss' scoped>
.yun-page {
  width: 100%;
  margin: 0 auto;
  &>img{
    width:100%;
  }
  .yun-card {
    width: 100%;
    position: relative;
    .yun-card1 {
      width: 1100px;;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      .yun-title {
        font-size: 32px;
        font-weight: bold;
        color: #31313b;
        line-height: 40px;
        text-align: center;
        display: flex;
        justify-content: center;
        animation:runkey2 1s;
      }
      .yun-sbtitle {
        margin-top: 20px;
        font-size: 24px;
        color: #828282;
        line-height: 30px;
        text-align: center;
        animation:runkey2 2s;
      }
      .yun-write {
        margin-top: 240px;
        position: relative;
        background: #e2eff8;
        padding: 320px 40px 80px;
        font-size: 22px;
        font-weight: 400;
        color: #31313b;
        line-height: 52px;
        .yun-point1 {
          position: absolute;
          left: -180px;
          top: 45%;
          width: 160px;
          img {
            width: 100%;
          }
        }
        .yun-point2 {
          position: absolute;
          right: -115px;
          top: 5%;
          width: 160px;
          img {
            width: 100%;
          }
        }
        .yun-point3 {
          position: absolute;
          right: 240px;
          bottom: -80px;
          width: 160px;
          img {
            width: 100%;
          }
        }
        .yun-write-card {
          width: 900px;
          height: auto;
          background: #ffffff;
          border-radius: 10px;
          position: absolute;
          top: -70px;
          left: 50%;
          transform: translate(-50%);
          padding: 45px 80px;
          animation:runkey5 1s;
          .yun-head {
            display: flex;
            justify-content: space-between;
            font-size: 28px;
            font-weight: bold;
            color: #31313b;
          }
          .yun-btn {
            width: 600px;
            height: 100px;
            padding: 20px 40px;
            background: #404fe0;
            box-shadow: 0px 18px 38px 0px rgba(7, 17, 126, 0.3);
            border-radius: 8px;
            font-size: 24px;
            color: #ffffff;
            line-height: 32px;
            margin: 40px auto 0;
            cursor: pointer;
            text-align: center;
          }
        }
        .yun-blue {
          color: #404fe0;
          margin-top: 80px;
        }
      }
    }
  }
}
@media screen and (max-width: 480px) {
  .yun-page {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    .yun-card {
      width: 100%;
      position: relative;
      &>img{
        width:100%;
      }
      .yun-card1 {
        width: 96%;
        position: absolute;
        top: 20px;
        left: 50%;
        transform: translate(-50%, 0);
        .yun-title {
          font-size: 24px;
          font-weight: bold;
          color: #31313b;
          line-height: 72px;
          text-align: center;
          display: flex;
          justify-content: center;
        }
        .yun-sbtitle {
          margin-top: 10px;
          font-size: 18px;
          color: #828282;
          line-height: 24px;
          text-align: center;
        }
        .yun-write {
          margin: 100px auto 0;
          position: relative;
          background: #e2eff8;
          padding: 8rem 15px 20px;
          font-size: 14px;
          color: #31313b;
          line-height: 26px;
          width:96%;
          
          .yun-point1 {
            position: absolute;
            left: -100px;
            top: 45%;
            width: 115px;
            img {
              width: 100%;
            }
          }
          .yun-point2 {
            position: absolute;
           right: -10px;
    top: -5%;
            width: 115px;
            img {
              width: 100%;
            }
          }
          .yun-point3 {
            position: absolute;
            right: 16%;
            bottom: -40px;
            width: 115px;
            img {
              width: 100%;
            }
          }
          .yun-write-card {
            width: 96%;
            height:auto;
            background: #ffffff;
            border-radius: 10px;
            position: absolute;
            top: -60px;
            left: 50%;
            transform: translate(-50%);
            padding: 15px 20px;
            .yun-head {
              display: flex;
              justify-content: space-between;
              font-size: 14px;
              font-weight: bold;
              color: #31313b;
            }
            .yun-btn {
              width: 80%;
              height: auto;
              padding: 10px 15px;
              background: #404fe0;
              box-shadow: 0px 18px 38px 0px rgba(7, 17, 126, 0.3);
              border-radius: 8px;
              font-size: 14px;
              color: #ffffff;
              line-height: 18px;
              margin: 30px auto 0;
              cursor: pointer;
              text-align: center;
            }
          }
          .yun-blue {
            color: #404fe0;
            margin-top: 30px;
          }
        }
      }
    }
  }
}
@keyframes runkey1{
   0%{
      opacity: 1;
      transform: scale(1);
   }
   50%{
      opacity: 0.8;
      transform: scale(1.1);
   }
   100%{
       opacity: 1;
       transform: scale(1);
   }
}
@keyframes runkey2{
   0%{
      transform: scale(0);
   }
   100%{
       transform: scale(1);
   }
}

@keyframes runkey3{
   0%{
       transform: translateY(0px);
   }
   50%{
     transform: translateY(-20px);
   }
   100%{
        transform: translateY(0px);
   }
}
@keyframes runkey4{
   0%{
       transform: scale(1);
   }
   50%{
     transform: scale(1.05);
   }
   100%{
        transform: scale(1);
   }
}
@keyframes runkey5{
   0%{
      top:40px;
   }
   100%{
      top:-150;
   }
}
</style>
